<script setup>
import {reactive, ref, onMounted} from 'vue'
import Dialog from '@/components/admin/EditDialog.vue'
import {ElMessage} from "element-plus";
import {
  GetAllFosterMessageService,
  AddFosterMessageService,
  deleteNetShopFosterService
} from '@/api/netshop/reservation.js'

const size = ref('')
const data = ref([])
const loading = ref(true)
const getList = async () => {
  const username = JSON.parse(localStorage.getItem('custom')).custom_username
  console.log(username)
  await GetAllFosterMessageService(username)
      .then((res) => {
        console.log(res)
        data.value = res.data.data
        loading.value = false
        // console.log(res.data.results.data)
      })
      .catch((err) => {
        console.log(err)
      })
}
onMounted(() => {
  getList()
})
// 对话框数据绑定
const form = ref({})

// 对话框
const formfields = ref({
  base: [
    {
      label: '宠物小名', field: 'pet_foster_name',
      rules: [
        {required: true, message: '宠物花名需要填写', trigger: 'blur'}
      ]
    },
    {
      label: '手机号', field: 'pet_foster_master_phone',
      rules: [
        {required: true, message: '留下你的电话号码以方便联系', trigger: 'blur'}
      ]
    },
    {
      label: '预约开始寄养时间', field: 'foster_start_time', type: 'alldate',
      rules: [{required: true, message: '选择你现场到店寄养的预约时间'}]
    },
    {
      label: '详细描述', field: 'description'
    },
  ],
})
// 对话框展开
const dialogObject = reactive({
  dialogVisible: false,
  title: '',
  width: '700',
  successBtnText: '确定',
  closeBtnText: '取消',
  isFooter: true
})
const addClick = () => {
  dialogObject.dialogVisible = true
  console.log(dialogObject.dialogVisible)
  dialogObject.title = '建档'
}

// 提交表单增加数据
const handleFormSubmit = async (form) => {
  const username = JSON.parse(localStorage.getItem('custom')).custom_username
  await AddFosterMessageService(form, username)
      .then((res) => {
        // console.log(res)
        dialogObject.dialogVisible = false
        getList()
      })
      .catch((error) => {
        console.log(error)
      })
}

// 删除
const Delete = async (id) => {
  await deleteNetShopFosterService(id)
      .then((res) => {
        // console.log(res)
        dialogObject.dialogVisible = false
        getList()
      })
      .catch((error) => {
        console.log(error)
      })
}
</script>

<template>
  <el-card class="box-card">
    <template #header>
      <div class="card-header">
        <span>
          预约列表
          <el-tooltip
              effect="dark"
              content="如需修改预约详情，请删除您的预约并重新建立"
              placement="top"
          >
          <el-icon style="margin-left: 4px" :size="12">
            <Warning/>
          </el-icon>
        </el-tooltip>
        </span>
        <el-button class="button" @click="addClick" text>预约</el-button>
      </div>
    </template>
    <div v-loading="loading" style="overflow: auto;height: 740px">
      <el-empty v-if="data.length === 0" description="当前您没有预约寄养！！！"/>
      <el-row v-else v-for="item in data" :key="item.id">
        <el-col :span="24">
          <el-card class="box-card" shadow="always">
            <template #header>
              <div class="card-header">
                <span>预约清单</span>
                <el-tag size="large" type="success">预约成功</el-tag>
              </div>
            </template>
            <el-descriptions
                direction="vertical"
                :column="4"
                :size="size"
                border
            >
              <el-descriptions-item label="宠物名">{{ item.pet_foster_name }}</el-descriptions-item>
              <el-descriptions-item :span="1" label="预约时间">{{ item.foster_start_time }}</el-descriptions-item>
              <el-descriptions-item :span="1" label="预约手机">{{ item.pet_foster_master_phone }}</el-descriptions-item>
              <el-descriptions-item :span="4" label="补充说明">
                {{ item.description }}
              </el-descriptions-item>
              <el-descriptions-item :span="4" label="详情">
                <div>到店地址：广东省珠海市金湾区珠海科技学院</div>
                <div>到店预约时间，如无空闲，请及时电话通知！！或者取消此预约</div>
                <div>详情电话：12345678910</div>
              </el-descriptions-item>
            </el-descriptions>
            <template #footer>
              <el-popconfirm
                  confirm-button-text="是"
                  cancel-button-text="否"
                  :icon="InfoFilled"
                  icon-color="#626AEF"
                  title="是否取消预约?"
                  @confirm="Delete(item.id)"
                  @cancel="cancelEvent"
              >
                <template #reference>
                  <el-button text>取消</el-button>
                </template>
              </el-popconfirm>
            </template>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </el-card>

  <div>
    <Dialog
        :dialogobject="dialogObject"
        :formlist="formfields.base"
        :model="form"
        @submit="handleFormSubmit"
        @edit="handleFormEdit"
    >
      <template #pictures="{row}">
        <el-upload
            action="http://127.0.0.1:8000/netshop/petmessage/upload/"
            list-type="picture-card"
            :auto-upload="true"
            ref="pictureUpload"
            :headers="uploadHeaders"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
            :limit="3"
        >
          <el-icon>
            <Plus/>
          </el-icon>
          <template #file="{ file }">
            <div>
              <img class="el-upload-list__item-thumbnail" :src="file.url" alt=""/>
              <span class="el-upload-list__item-actions">
          <span
              class="el-upload-list__item-preview"
              @click="handlePictureCardPreview(file)"
          >
            <el-icon><zoom-in/></el-icon>
          </span>
          <span
              v-if="!disabled"
              class="el-upload-list__item-delete"
              @click="handleRemove(file)"
          >
            <el-icon><Delete/></el-icon>
          </span>
        </span>
            </div>
          </template>
        </el-upload>
        <el-dialog v-model="dialogVisible">
          <img w-full :src="form.fileList" alt="Preview Image"/>
        </el-dialog>
      </template>
    </Dialog>
  </div>

</template>

<style scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.el-row {
  margin-bottom: 20px;
}

.demo-image__error .image-slot {
  font-size: 30px;
}

.demo-image__error .image-slot .el-icon {
  font-size: 30px;
}

.demo-image__error .el-image {
  width: 100%;
  height: 200px;
}
</style>